<template>
  <div class="login">
    <mt-header fixed :title="translate[title]">
      <mt-button  slot="left" icon="back" @click="$router.back()">返回</mt-button>
    </mt-header>
    <div class="login-box">
      <mt-field class="input" label="帐号" placeholder="请输入帐号" type="text" v-model="username"></mt-field>
      <mt-field class="input" label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
      <mt-button type="primary" size="large" @click="login">Login</mt-button>
      <br>
      <router-link to="/join" style="text-decoration: none"><mt-button type="primary" size="large">Join Us</mt-button></router-link>
    </div>

  </div>
</template>
<script>
  import Cookies from 'js-cookie';

  import fetch from 'axios'

  export default {
    data(){
      return {

        username: '',
        password: '',
        title:'login',
        translate:{
          login: '登录',
          signup: '注册'
        }
      }
    },
    created(){
      if(Cookies.get('userId')){
        this.$router.push('/reader')
      }
    },
    methods:{
      login(){
        this.validate().then(vali=>{
          fetch.post('https://acfun.leanapp.cn/user/login',{
            username:this.username ,
            password:this.password
          }).then(res=>{
            Cookies.set('userId',res.data.objectId)
            this.$router.push('/reader')
          })
        })
      },
      validate(){
        return new Promise((resolve,reject)=>{
          if(this.username!=''&&this.password!=''){
            resolve(true)
          }
          reject('please enter username and password')
        })
      }
    }
  }
</script>
<style>
  .login{
    background: url("https://www.bing.com/az/hprichbg/rb/EuropeanBarracuda_EN-US14372678414_1080x1920.jpg") top center/cover;
    min-height: 100vh;
  }
  .login-box{
    padding: 38vh 10px 0;


  }
  .input{
    border-radius: 8px;
    margin-bottom: 10px;
  }
</style>
